import { createStyles } from 'antd-style';
import LiveVideo from '@/components/LiveVideo';
import { useVideoCarNo } from '@/store/realTimeMonitoringStore.ts';

const useStyle = createStyles(({ css }) => {
  return {
    wrapper: css`
      background-color: var(--ycx-container-bg-color);
      border: 1px solid var(--ycx-container-border-color);
      box-shadow: 0 8px 12px 0 rgba(119, 130, 153, 0.08);
      backdrop-filter: blur(8px);
      border-radius: 16px;
      padding: 16px;
      position: absolute;
      left: 352px;
      right: 380px;
      top: 106px;
      bottom: 32px;
      z-index: 3;
      max-width: 916px;
    `,
  };
});

const VideoWrapper = () => {
  const { styles } = useStyle();
  const videoCarNo = useVideoCarNo();

  return (
    <div className={styles.wrapper}>
      <div
        style={{
          backgroundColor: 'var(--ycx-card-bg-color)',
          boxShadow: '0 8px 16px 0 rgba(164, 172, 192, 0.08)',
        }}
        className="video-wrapper h-full overflow-hidden rounded-2xl"
      >
        <LiveVideo carNo={videoCarNo?.carNo} />
      </div>
    </div>
  );
};

export default VideoWrapper;
